<template>
  <iframe ref="iframe" :src="src" @load="handleLoad"></iframe>
</template>
<script setup>
import { ref, onBeforeUnmount } from 'vue'
const props = defineProps({
  src: {
    type: String,
    required: true
  }
})
const emit = defineEmits(['handleMessage'])
const iframe = ref(null)
function handleLoad() {
  window.addEventListener('message', receiveMessage)
}
function receiveMessage(event) {
  const message = event.data
  console.log('Received message:', message)
  emit('handleMessage')
  // 执行你想要的操作，例如更新组件的数据或回调函数
}
function sendMessage(message) {
  const iframeWindow = iframe.value.contentWindow
  iframeWindow.postMessage(message, props.src)
}
onBeforeUnmount(() => {
  window.removeEventListener('message', receiveMessage)
})
//<PostMessageIframe :src="iframeSrc" @handle-message="callback" ref="postMessageIframe" />
</script>
